<template>
  <view>
    <uv-row>
      <uv-col span="10" offset="1">
        <view
          :style="{ '--bg-color': bgColor }"
          class="bg-color card-shadow"
          mt-2
          mb-2
          pt-2
          pb-2
          pl-3
          pr-3
          rd-2
        >
          <uv-text :text="props?.title" size="20" bold />
          <view mt-2>
            <uv-text :text="props?.description" />
          </view>
        </view>
      </uv-col>
    </uv-row>
  </view>
</template>

<script setup lang="ts">
interface CardProps {
  title: string
  indented: boolean
  description: string
  bgColor: string
}

const props = withDefaults(defineProps<CardProps>(), {
  title: '',
  indented: false,
  description: '',
  bgColor: '#007aff44',
})
</script>

<style lang="scss">
.bg-color {
  background-color: var(--bg-color) !important;
}

.card-shadow {
  box-shadow: 0 0 10rpx 10rpx rgb(0 0 0 / 10%);
}
</style>
